<template>
  <el-dialog :title="information ? '课程内容' : (dataForm.id ? '编辑课程': '新增课程') " :close-on-click-modal="false" append-to-body
             :visible.sync="visible" class="cu-dialog cu-dialog_center" lock-scroll width="880px">
    <el-row :gutter="15" class="" >
      <el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right"  :rules="rules">
        <template v-if='information === false'>
          <el-col :span="12">
            <el-form-item label="课程名称" prop="courseName">
              <el-input v-model="dataForm.courseName" placeholder="请输入课程名称" clearable required :style="{ width: '100%' }" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课程时长" prop="courseDuration"  >
              <el-input v-model="dataForm.courseDuration" placeholder="请输入课程时长" clearable required :style="{ width: '100%' }" >
                <template slot="append">
                  分钟
                </template>
              </el-input>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12" >
            <el-form-item label="课程目标" prop="courseObjective">
              <el-input v-model="dataForm.courseObjective" placeholder="请输入课程目标" clearable required :style="{ width: '100%' }" ></el-input>
            </el-form-item>
          </el-col>-->
          <el-col :span="24" >
            <el-form-item label="课程简介" prop="courseIntroduction">
              <el-input v-model="dataForm.courseIntroduction" type="textarea"
                        :rows="2" placeholder="请输入课程简介" clearable required :style="{ width: '100%' }"  ></el-input>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">
            <el-form-item label="适用对象" prop="targetAudience" >
              <el-select v-model="dataForm.targetAudience" placeholder="请选择适用对象" filterable clearable required :style="{ width: '100%' }"  >
                <el-option :key="item.enCode" :label="item.fullName" :value="item.enCode" v-for="item in targetAudienceOptions" />
              </el-select>
            </el-form-item>
          </el-col>-->


<!--          <el-col :span="12">
            <el-form-item label="关联讲师" prop="teacherIds">
              <user-select v-model="dataForm.teacherIds" placeholder="请选择" clearable multiple></user-select>
            </el-form-item>
          </el-col>-->
        </template>
        <template v-else>
          <el-col :span="24" >
            <el-form-item label-width="0">
              <groupTitle content-position="left" content="课程大纲"></groupTitle>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="'章节' + (index + 1)" prop="courseOutline"  v-for='(item, index)  in dataForm.courseOutline' :key='index' style='margin-bottom: 0 !important;'>
              <div style='display: flex'>
                <el-form-item label="" :prop="'courseOutline.' + index+ '.name'" :rules="{
      required: true, message: '请输入章节名称', trigger: 'blur'
    }">
                  <el-input v-model="item.name" placeholder="请输入章节名称" clearable required :style="{ width: '100%' }" ></el-input>
                </el-form-item>
                <el-form-item label="" :prop="'courseOutline.' + index+ '.content'"  :rules="{
      required: true, message: '请输入该章节的简要内容', trigger: 'blur'
    }">
                  <el-input v-model="item.content" placeholder="请输入该章节的简要内容" clearable required :style="{ width: '100%' }" ></el-input>
                </el-form-item>
                <el-form-item label=""  v-if='dataForm.courseOutline.length > 1'>
                  <el-button type="text"  icon="el-icon-delete" @click="onDeleteLine(index)" :loading='loading'>删除</el-button>
                </el-form-item>
              </div>
            </el-form-item>
            <el-form-item label="" >
              <el-button type="text"  icon="el-icon-circle-plus-outline" @click="onAddLine()" :loading='loading'>添加新的章节</el-button>
            </el-form-item>

          </el-col>
          <el-col :span="24" >
            <el-form-item label-width="0">
              <groupTitle content-position="left" content="课程资料"></groupTitle>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="资料上传" prop="materials">
              <custom-upload-fz v-model="dataForm.materials" type="materials" required :fileSize="20" sizeUnit="MB" :limit="9" buttonText="点击上传文件"></custom-upload-fz>
            </el-form-item>
          </el-col>
        </template>


      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" :loading='loading'>确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export { default } from './index.js'
</script>
